<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品筛选</title>
    <script src="../jquery-3.1.1.js"></script>
    <style>
        ul,li{
            margin:0;
            padding:0;
            list-style: none;
        }
        .container{
            width: 768px;
            border:1px solid #ccc;
        }
        li{
            border-bottom: 1px dashed #ccc;
            font-size: 14px;
            height: 40px;
            overflow: hidden;
        }
        li:last-child{
            border: none;
        }
        li .name{
            float: left;
            width:100px;
            height:25px;
            text-align: right;
            font-weight: bold;
            line-height: 40px;
        }
        li .intro{
            float: left;
            width: 668px;
            line-height: 40px;
        }
        li a{
            text-decoration: none;
            margin:0 5px;
        }
        li .intro a.selected,
        li .intro a:hover{
            background-color: #f63;
            color: white;
        }

        li.choose .intro span{
            border: 1px solid #ff6633;
            padding: 3px;
            margin-right: 10px;
            cursor: pointer;
            display: none;
        }
        li.choose .intro span em{
            font-style: normal;
            color: #ccc;
        }
        li.choose .intro span:hover em{
            color: #ff6633;
        }
    </style>
</head>
<body>
    <div class="container">
        <ul>
            <li>
                <span class="name">品牌：</span>
                <span class="intro">
                    <a href="javascript:;">三星</a>
                    <a href="javascript:;">苹果</a>
                    <a href="javascript:;">小米</a>
                    <a href="javascript:;">华为</a>
                    <a href="javascript:;">努比亚</a>
                    <a href="javascript:;">魅族</a>
                    <a href="javascript:;">OPPO</a>
                    <a href="javascript:;">诺基亚</a>
                </span>
            </li>
            <li style="height: 80px"><span class="name">价格：</span>
                <span class="intro">
                    <a href="javascript:;">500元以下</a>
                    <a href="javascript:;">500-1000元</a>
                    <a href="javascript:;">1001-2000元</a>
                    <a href="javascript:;">2001-3000元</a>
                    <a href="javascript:;">3001-4000元</a>
                    <a href="javascript:;">4001-5000元</a>
                    <a href="javascript:;">5001-6000元</a>
                    <a href="javascript:;">6000元以上</a>
                    <a href="javascript:;">4001-5000元</a>
                    <a href="javascript:;">5001-6000元</a>
                    <a href="javascript:;">6000元以上</a>
                </span>
            </li>
            <li><span class="name">主屏尺寸：</span>
                <span class="intro">
                    <a href="javascript:;">6.0英寸以上</a>
                    <a href="javascript:;">5.5-6.0英寸</a>
                    <a href="javascript:;">5.0-5.5英寸</a>
                    <a href="javascript:;">4.5-5.0英寸</a>
                    <a href="javascript:;">4.0-4.5英寸</a>
                    <a href="javascript:;">4.0英寸以下</a>
                </span>
            </li>
            <li><span class="name">网络：</span>
                <span class="intro">
                    <a href="javascript:;">全网通</a>
                    <a href="javascript:;">移动4G</a>
                    <a href="javascript:;">联通4G</a>
                    <a href="javascript:;">电信4G</a>
                </span>

            </li>
            <li><span class="name">核心数：</span>
                <span class="intro">
                    <a href="javascript:;">十核</a>
                    <a href="javascript:;">八核</a>
                    <a href="javascript:;">四核</a>
                    <a href="javascript:;">双核</a>
                    <a href="javascript:;">双核及以下</a>
                </span>
            </li>
            <li><span class="name">特性：</span>
                <span class="intro">
                    <a href="javascript:;">大屏幕</a>
                    <a href="javascript:;">双卡双待</a>
                    <a href="javascript:;">千元机</a>
                    <a href="javascript:;">拍照神器</a>
                    <a href="javascript:;">指纹识别</a>
                    <a href="javascript:;">2K屏</a>
                </span>
            </li>
            <li class="choose">
                <span class="name">你的选择：</span>
                <span class="intro">
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </span>
            </li>
        </ul>
    </div>
</body>
</html>
<script>
    $('li .intro a').click(function () {
        $(this).addClass('selected').siblings().removeClass('selected');
        var index = $(this).parents('li').index();
        var text = $(this).text() + '<em>&times;</em>';
        $('.choose .intro span').eq(index).html(text).show();
        $('.choose .intro span').click(function () {
            var index = $(this).index();
            $('li').eq(index).find('.intro a').removeClass('selected');
            $(this).empty().css('display','none');
            clearAll();
        });
        clearAll();
    });
    function clearAll() {
        $('#clear').remove();
        var length = $('.choose .intro span').not(':empty').length;
        if(length>0){
            var clear = '<a href="javascript:;" id="clear" class="clear">清空</a>'
            $('.choose .intro').append(clear);
//            点击清空按钮 清除所有的选项及样式
            $('#clear').click(function () {
                $('.choose .intro span').html('').css('display','none');
                $('li').not('.choose').find('a').removeClass('selected');
                $(this).remove();
            });
        }
    }
</script>